<template>
  <div class="click-config">
    <div class="grid grid-cols-1 gap-4">
      <div class="grid grid-cols-2 gap-3">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">点击类型</label>
          <el-select 
            v-model="localStep.clickType" 
            size="small"
            @change="updateStep"
          >
            <el-option label="单击" value="click" />
            <el-option label="双击" value="dblclick" />
            <el-option label="右键点击" value="contextmenu" />
            <el-option label="悬停" value="hover" />
          </el-select>
        </div>
        
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">鼠标按键</label>
          <el-select 
            v-model="localStep.button" 
            size="small"
            @change="updateStep"
          >
            <el-option label="左键" value="left" />
            <el-option label="右键" value="right" />
            <el-option label="中键" value="middle" />
          </el-select>
        </div>
      </div>
      
      <div class="border-t border-gray-200 pt-4">
        <h4 class="text-sm font-medium text-gray-700 mb-3">点击选项</h4>
        <div class="grid grid-cols-2 gap-3">
          <el-checkbox 
            v-model="localStep.force"
            @change="updateStep"
          >
            强制点击（忽略可见性）
          </el-checkbox>
          <el-checkbox 
            v-model="localStep.noWaitAfter"
            @change="updateStep"
          >
            点击后不等待
          </el-checkbox>
          <el-checkbox 
            v-model="localStep.trial"
            @change="updateStep"
          >
            试验模式（不实际点击）
          </el-checkbox>
          <el-checkbox 
            v-model="localStep.scrollIntoView"
            @change="updateStep"
          >
            滚动到元素可见
          </el-checkbox>
        </div>
      </div>
      
      <div class="grid grid-cols-3 gap-3">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">点击次数</label>
          <el-input-number
            v-model="localStep.clickCount"
            :min="1"
            :max="10"
            size="small"
            class="w-full"
            @change="updateStep"
          />
        </div>
        
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">点击后等待 (ms)</label>
          <el-input-number
            v-model="localStep.delay"
            :min="0"
            :step="100"
            size="small"
            class="w-full"
            @change="updateStep"
          />
        </div>
        
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">超时时间 (ms)</label>
          <el-input-number
            v-model="localStep.timeout"
            :min="1000"
            :step="1000"
            size="small"
            class="w-full"
            @change="updateStep"
          />
        </div>
      </div>
      
      <div v-if="localStep.clickType === 'hover'" class="border-t border-gray-200 pt-4">
        <h4 class="text-sm font-medium text-gray-700 mb-3">悬停选项</h4>
        <div class="grid grid-cols-2 gap-3">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">悬停位置</label>
            <el-select 
              v-model="localStep.hoverPosition" 
              size="small"
              @change="updateStep"
            >
              <el-option label="中心" value="center" />
              <el-option label="左上角" value="top-left" />
              <el-option label="右下角" value="bottom-right" />
            </el-select>
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">悬停时长 (ms)</label>
            <el-input-number
              v-model="localStep.hoverDuration"
              :min="100"
              :step="100"
              size="small"
              class="w-full"
              @change="updateStep"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  step: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['update'])

const localStep = ref({
  clickType: 'click',
  button: 'left',
  force: false,
  noWaitAfter: false,
  trial: false,
  scrollIntoView: true,
  clickCount: 1,
  delay: 1000,
  timeout: 30000,
  hoverPosition: 'center',
  hoverDuration: 1000,
  ...props.step
})

watch(() => props.step, (newStep) => {
  localStep.value = {
    clickType: 'click',
    button: 'left',
    force: false,
    noWaitAfter: false,
    trial: false,
    scrollIntoView: true,
    clickCount: 1,
    delay: 1000,
    timeout: 30000,
    hoverPosition: 'center',
    hoverDuration: 1000,
    ...newStep
  }
}, { deep: true })

const updateStep = () => {
  emit('update', localStep.value)
}
</script>